import React, {useEffect, useState} from 'react';
import {withRouter} from 'react-router-dom';
import { List, Avatar, Space,Row, Col,Image} from 'antd';
import { MessageOutlined, LikeOutlined, UploadOutlined,RetweetOutlined,LikeTwoTone} from '@ant-design/icons';
import style from './index.module.css'
import InputMessage from '../inputComponent'
import {post} from "../../../utils/post";

/**
 * 推文列表组件
 * @param data:推文
 * @returns {JSX.Element}
 *
 */
const TweetsList = (props) => {
    const [isShow,changeIsShow] = useState(false);
    const [isLike,changeIsLike] = useState(false);
    const [list,changeList]=useState([]);
    const [whichTweet,changeTweet]=useState("");//当前选择哪条推文回复
    useEffect(()=>{
        if(props.data){
            const  {data} =props
            changeList(myReverse(data));
        }
    },[props])
    const  {isPerson,showImg} =props

    const myReverse=(data)=>{//反转推文数组
        let array =[];
        if(data!==undefined){
            data.map((item)=>{
                array.unshift(item)
            })
        }
        return array
    }
    const myTime=(time)=>{//展示时间
        return time?.substring(0,10)+" "+time?.substring(11,19);
    }
    const IconText = ({ icon, text }) => (
        <Space>
            {React.createElement(icon)}
            {text}
        </Space>
    );
    const jump=(e,id,msgID)=>{//跳转到推文详情页
        if(e.target.matches('img')||e.target.matches('a')){
            return;
        }
        props.history.push(`/index/${id}/${msgID}`)
    }
    const changeLike=(_id)=>{//处理点赞
        if(!isLike){//原来是不喜欢的  点赞
            post('/api/addGood',{_id}).then(
                    res=>{
                        let newlist = list.map((item)=>{
                            if(item._id==_id){
                                return res.data.data.res
                            }
                            else return item;
                        })
                        changeList(newlist);
                    })
        }else{//取消点赞
            post('/api/removeGood',{_id}).then(
                res=>{
                    let newlist = list.map((item)=>{
                        if(item._id==_id){
                            return res.data.data.res
                        }
                        else return item;
                    })
                    changeList(newlist);
                })
            }
        changeIsLike(!isLike);
    }
    const showType=()=>{//判断组件展示什么

    }
    return(
        <div>
        <List className={`${style.body}`}
            bordered={true}
            size ="small"
            pagination={{
                pageSize: 5,
            }}
            dataSource={list}
            renderItem={item => (
                <List.Item className={`${style.bodyItem}`} key={item.msgID}>
                    {/*用户信息及推文*/}
                    <List.Item.Meta className={`${style.meta}`}
                        avatar={<Avatar onClick={()=>{isPerson?console.log("不跳转"):props.history.push(`/index/${item.id}`) }}
                                        src={item.avater} />}
                        title={<a onClick={()=>{isPerson?console.log("不跳转"):props.history.push(`/index/${item.id}`)}}>{item.nickname}</a>}
                    />
                    {/*时间*/}
                    <p className={style.time} onClick={(e)=>jump(e,item.id,item._id)}>{showImg&&myTime(item.createdAt)}</p>
                    {/*推文内容*/}
                    <div className={style.content} onClick={(e)=>jump(e,item.id,item._id)}>
                        {item.content}
                    </div>
                    {/*图片*/}
                    <Row className={style.image}>
                        {//与运算，当数据为评论数据时，不展示图片
                            showImg&&item.image.length!==0&&item.image.map((value,key) => {
                                return(
                                    <Col className="gutter-row" key={key} span={8}>
                                        <Image
                                            className={`${style.img}`}
                                            key={key}
                                            width={160}
                                            height={160}
                                            alt="照片"
                                            src={value}
                                        />
                                    </Col>
                                )
                            })
                        }
                    </Row>
                    {/*点赞转发一栏*/}
                    <div className={style.action}>
                        <Row>
                            <Col className="gutter-row" span={6}>
                                <IconText icon={RetweetOutlined} text={item.retweet} key="list-vertical-retweet-o"/>
                            </Col>
                            <Col className="gutter-row" span={6} onClick={()=>changeLike(item._id)}>
                                <IconText icon={LikeOutlined}  text={item.good} key="list-vertical-like-o" />
                            </Col>
                            <Col className="gutter-row" onClick={()=>{changeIsShow(true);changeTweet(item._id) }} span={6}>
                                <IconText icon={MessageOutlined} text={item.reply} key="list-vertical-message" />
                            </Col>
                            <Col className="gutter-row" span={6}>
                                <IconText icon={UploadOutlined} text={item.shared} key="list-vertical-upload"/>
                            </Col>
                        </Row>
                    </div>
                </List.Item>

            )}
        />
            <InputMessage show={isShow}  msgId={whichTweet} changeShow={(value)=>changeIsShow(value)}/>
        </div>
    );

                    }

export default withRouter(TweetsList);
